<template>
    <div class="example-box">
        <cpcMenu class="left" :navMenu="navMenu" :datas="datas" @select="AnchorLinkTo"></cpcMenu>
        <cpcListItems ref="refCpcListItems" class="right" :datas="datas"></cpcListItems>
    </div>
</template>
  
  <script lang="ts">
import { ref, defineComponent, reactive } from 'vue';
import { useRouter } from "vue-router"
import cpcMenu from '@/components/cpcMenu/cpcMenu.vue';
import cpcListItems from '@/components/cpcMenu/cpcListItems.vue';
export default defineComponent({
    name: 'Example',
    components: { cpcMenu, cpcListItems },
    props: {
        datas: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            navMenu: {
                props: {
                  
                },
                activeIndex: "00_00_baseOption",
            },
        };
    },
    computed: {

    },
    methods: {
        //根据id,飞到指定的位置
        AnchorLinkTo(id: string) {
            (this.$refs.refCpcListItems as any).AnchorLinkTo(id);

        }
    },
    mounted() {

    },
});
</script>
  
  <style scoped lang="less">
@import url("@/styles/var.less");
.example-box {
    width: 100%;
    height: 100%;
    display: flex;
    .left {
        width: 3rem;
        height: 100%;
    }
    .right {
        background-color: @cr-bgc-base;
        flex: 1;
    }
}
</style>
  